﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Grid component example</title>
    <style type="text/css">
        thead
        {
            background-color: #E7E9EB;
            height: 25px;
        }
        table
        {
            border-collapse: collapse;
            border: 1px solid #B1ABDF;
            border-spacing: 0px;
        }
        td, th
        {
            padding-left: 4px;
            padding-right: 6px;
            text-align: left;
            border: 1px solid #B1ABDF;
        }
        .footer
        {
            background-color: #E7E9EB;   
            height: 30px;         
        }
        .footer a
        {
            color: #000000;
            padding: 2px 4px;
            text-decoration: none;
        }
        .focus
        {
            border: 1px solid red;
        }
        input[type="image"]
        {
            vertical-align: -6px;
        }
        input[type="checkbox"]
        {
            vertical-align: -2px;
        }
        input[type="text"] 
        {
            border: 1px solid #9595D6;
        }
        .downRight
        {
            text-align: right;
        }
    </style>
</head>
<body>
    <form>
        <table border="1">
            <thead>
                <tr>
                    <td colspan="6">Drag a column header and drop it here to group by that column</td>
                </tr>
                <tr>
                    <td>ProductID</td>
                    <td>Product name</td>
                    <td>Unit price</td>
                    <td>Quantity per unit</td>
                    <td>Units in stock</td>
                    <td>Discontinued</td>
                </tr>
                <tr>
                    <td>
                        <input type="text" size="5" />
                    </td>
                    <td>
                        <input type="text" size="20" />
                    </td>
                    <td>
                        <input type="text" size="10" />
                        <input type="image" src="images\filter.png" alt="sort"/>
                    </td>
                    <td>
                        <input type="text" size="20" />
                    </td>
                    <td>
                        <input type="text" size="10" />
                        <input type="image" src="images\filter.png" alt="sort"/>
                    </td>
                    <td>
                        <input type="checkbox"/>
                        <input type="image" src="images\filter.png" alt="sort"/>
                    </td>
                </tr>
            </thead>
            <tfoot class="footer">
                <tr>
                    <td colspan="2">
                        <input type="image" src="images\first.png" alt="Filter" />
                        <input type="image" src="images\prev.png" alt="Filter" />
                        <a class="focus" href="#">1</a>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#">4</a>
                        <a href="#">5</a>
                        <a href="#">6</a>
                        <a href="#">7</a>
                        <a href="#">8</a>
                        <a href="#">9</a>
                        <a href="#">10</a>
                        ...
                        <input type="image" src="images\next.png" alt="Filter" />
                        <input type="image" src="images\last.png" alt="Filter" />
                    </td>
                    <td>
                        Page size:
                        <select name="page_size">
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                        </select>
                    </td>
                    <td class="downRight" colspan="3"> 335104 items in 33511 pages </td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Chai</td>
                    <td>$18.00</td>
                    <td>10 boxes x 20 bags</td>
                    <td>39</td>
                    <td>
                        <input type="checkbox" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Chang</td>
                    <td>$19.00</td>
                    <td>24-12 oz bottles</td>
                    <td>17</td>
                    <td>
                        <input type="checkbox" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Aniseed Syrup</td>
                    <td>$10.00</td>
                    <td>12-550 ml bottles</td>
                    <td>13</td>
                    <td>
                        <input type="checkbox" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Chef Anton's Cajun Seasoning</td>
                    <td>$22.00</td>
                    <td>48-6 oz jars</td>
                    <td>53</td>
                    <td>
                        <input type="checkbox" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Chef Anton's Gumbo Mix</td>
                    <td>$21.35</td>
                    <td>36 boxes</td>
                    <td>0</td>
                    <td>
                        <input type="checkbox" checked="checked" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Grandma's Boysenberry Spread</td>
                    <td>$25.00</td>
                    <td>12-8 oz jars</td>
                    <td>120</td>
                    <td>
                        <input type="checkbox" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>Uncle Bob's Organic Dried Pears</td>
                    <td>$30.00</td>
                    <td>12-1 lb pkgs</td>
                    <td>15</td>
                    <td>
                        <input type="checkbox" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>Northwood's Cranberry Sauce</td>
                    <td>$40.00</td>
                    <td>12-12 oz jars</td>
                    <td>6</td>
                    <td>
                        <input type="checkbox" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Mishi Kobe Niku</td>
                    <td>$97.00</td>
                    <td>18-500 g pkgs</td>
                    <td>29</td>
                    <td>
                        <input type="checkbox" checked="checked" disabled="disabled"/>
                    </td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Ikura</td>
                    <td>$31.00</td>
                    <td>12-200 ml jars</td>
                    <td>31</td>
                    <td>
                        <input type="checkbox" disabled="disabled"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>
